<template>
	<view class="container">
<!-- 		<view v-if="isDir === 1" class="top" @click="briefClick">
			<view class="info">简介说明</view>
			<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
		</view> -->
		<view v-for="(item, index) in list" class="item" @click="itemClick(item, index)">
			<view class="title">
				{{item.title}}
			</view>
			<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
		</view>
	</view>
</template>

<script>
	import { getDocuments, getDocumentDirs } from '@/api/document.js'
	export default {
		data() {
			return {
				isDir: 0,
				list: [],
			}
		},
		onLoad(options) {
			console.log(options);
			this.isDir = parseInt(options.isDir);
			this.dirId = options.dirId;
			this.dirTitle = options.dirTitle;
			if (this.isDir === 1) {
				this.getDocuments(this.page);
				this.setTitle(this.dirTitle)
			} else {
				this.getDocumentDirs();
			}
		},
		methods: {
			getDocumentDirs() {
				getDocumentDirs(3, 0, 99).then(res => {
					console.log(res);
					this.list = res.data.content;
				})
			},
			
			getDocuments(page) {
				let params = {
					dirId: this.dirId,
					pageNum: 0,
					pageSize: 99,
				}
				getDocuments(params).then(res => {
					console.log(res);
					this.list = res.data.content
				})
			},
			
			setTitle(title) {
				console.log(title);
				uni.setNavigationBarTitle({
				　　title: title
				})
			},
			
			briefClick() {
				this.$u.route({
					url: 'pages_sub/recipe/recipe-month-info',
					params: {
						isDir: 0,
						id: this.dirId,
						title: this.dirTitle
					}
				})
			},
			
			itemClick(item, index) {
				console.log('itemClick');
				if (this.isDir === 1) {
					this.$u.route({
						url: 'pages_sub/recipe/recipe-month-info',
						params: {
							isDir: 1,
							id: item.id,
							title: item.title
						}
					})
				} else {
					this.$u.route({
						url: 'pages_sub/recipe/recipe-month-page',
						params: {
							isDir: 1,
							dirId: item.id,
							dirTitle: item.title
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		margin:16rpx 32rpx;
	}
	
	.top{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		
		.info{
			margin-right: 10rpx;
			color: $app-font-color;
			font-size: $app-font-size-md;
		}
	}
	
	.item{
        padding:18rpx 36rpx 18rpx 36rpx;
        background: #f4f4fe;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        display:flex;
        flex-direction: row;
		justify-content: space-between;
        position: relative;
		
		.title{
			color:#807ec3;
			font-size: 26rpx;
		}
	}
</style>
